<template>
  <div class="article-detail">
    <NavBar title="文章详情"></NavBar>
    <div class="outside">
      <!-- 文章所有内容 -->
      <div class="article">
        <h3 id="title">北京石景山区：娱乐场所和地下各类活动场所暂不开放</h3>
        <!-- 文章相关信息 -->
        <div id="authorAndTime">
          <span>来源：北京日报</span>
          <span>时间：2022年06月19日 21:48</span>
        </div>
        <!-- 文章正文 -->
        <div class="articleContainer">
          <div>
            6月19日上午，区委书记常卫主持召开石景山新冠肺炎疫情防控工作领导小组第260次会议。李新、李文起、田利跃、刘海涛等区四套班子领导参加会议。
          </div>
          <div>
            会议指出，当前全市疫情总体上已得到有效控制，社会面传播已基本阻断，疫情已进入收尾阶段，但昌平区新检出的1例社会面确诊病例提醒我们，越到收尾阶段越要高度警惕，越要严防死守。要认真贯彻落实北京新冠肺炎疫情防控工作领导小组相关会议精神，坚持动态清零不动摇，打好主动仗，防松懈、防漏洞、防反弹，巩固好来之不易的疫情防控成果。
          </div>
          <div>
            会议强调，要抓好风险管控。持续抓好天堂超市酒吧和门头沟唱吧麦颂KTV相关后续风险点位和重点人群的分类管控，做好居家隔离人员的管理工作，确保不漏一人、管控到位。8小时应急处置指挥部要继续保持战时状态，及时处理突发情况。
          </div>
          <div>
            要强化封（管）控区和集中隔离点规范管理。善始善终，落实好封管控区各项管控措施，严格评估后才能解封，防止风险外溢。坚持“解封不等于解防”，做好封（管）控区解封后的各项收尾工作。集中隔离点要严防交叉感染，按时做好集中隔离和居家隔离人员的核酸检测，确保不漏一人。
          </div>
          <div>
            要做好核酸检测工作。统筹抓好加强重点筛查和常态化筛查。检验检疫组和行业管理部门要督促重点行业和人群严格做好定期核酸筛查，实现人员全覆盖。严格落实阳性治愈人员单人单管采样。
          </div>
        </div>
        <hr style="width: 80vw" />
        <div class="comment">
          <Comment
            v-for="item in commentList"
            :key="item.id"
            :name="item.name"
            :contain="item.contain"
            :commentTime="item.commentTime"
          ></Comment>
        </div>
      </div>
    </div>
    <!-- 评论栏 -->
    <div class="talk">
      <input type="text" placeholder="说点什么吧！" v-model="contain" />
      <button @click="sendComment">发送</button>
    </div>
  </div>
</template>

<script>
import NavBar from "@/components/navBar.vue";
import { Divider } from "vant";
import Comment from "@/components/comment.vue";
import router from "@/router";
import { Dialog } from "vant";
export default {
  components: {
    NavBar,
    Divider,
    Comment,
  },
  data() {
    return {
      contain: "",
      commentList: [],
    };
  },
  methods: {
    sendComment() {
      const token = localStorage.getItem("Token");
      if (!token) {
        Dialog.confirm({
          title: "发送失败",
          message: "您还未登录，是否跳转到登录页面？",
        })
          .then(() => {
            router.push("/login");
          })
          .catch(() => {
            // on cancel
          });
      } else {
        if (this.contain.trim() !== "") {
          let canUseId = 0;
          this.commentList.forEach((item) => {
            if (item.id > canUseId) canUseId = item.id;
          });
          canUseId += 1;
          const obj = {
            id: canUseId,
            name: "ming",
            contain: this.contain,
            commentTime: this.getCommentTime(),
          };
          this.commentList.push(obj);
          this.contain = "";
          this.saveCommentList(this.commentList);
        }
      }
    },
    getCommentTime() {
      const date = new Date();
      const y = date.getFullYear();
      const m = date.getMonth() + 1;
      const d = date.getDate();
      const hh = date.getHours();
      const mm = date.getMinutes();
      const ss = date.getSeconds();
      return `${y}-${m}-${d} ${this.fixZero(hh)}:${this.fixZero(
        mm
      )}:${this.fixZero(ss)}`;
    },
    fixZero(num) {
      return num < 10 ? "0" + num : num;
    },
    getCommentList() {
      this.commentList = JSON.parse(localStorage.getItem("commentList"));
    },
    saveCommentList(val) {
      localStorage.setItem("commentList", JSON.stringify(val));
    },
  },
  created() {
    this.getCommentList();
  },
};
</script>

<style lang='less' scoped>
* {
  margin: 0;
  padding: 0;
}
.outside {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100vw;
  background-color: rgb(230, 227, 227);
}
.article-detail {
  position: relative;
  justify-content: center;
  align-items: center;
  width: 100vw;
  height: 100vh;
  padding-top: 46px;
  .article {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 80vw;
  }
  #authorAndTime {
    display: flex;
    width: 80vw;
    justify-content: space-between;
    span {
      color: rgb(80, 80, 82);
      font-size: 12px;
    }
  }
  .articleContainer {
    margin-bottom: 40px;
    div {
      font-size: 16px;
      text-indent: 2em;
    }
  }
  .comment {
    padding-top: 20px;
    margin-bottom: 50px;
  }
  .talk {
    position: fixed;
    display: flex;
    width: 100vw;
    bottom: 0;
    input {
      flex: 2;
    }
    button {
      width: 20vw;
      height: 5vh;
      border-radius: 3px;
      background-color: skyblue;
      color: white;
    }
  }
}
</style>